<template>
    <div>
        <el-row>
            <el-col :xs="{span:24}" :sm="{span:4}">
                 <el-tree
                    :data="data2"
                    node-key="id"
                    default-expand-all
                    :props="defaultProps"
                    @check-change="handleClick" ref="treeForm" @node-click="nodeClick">
                </el-tree>
            </el-col>
            <el-col :xs="{span:24}" :sm="{span:19,offset:1}">
                <el-form v-if="menuList" v-model="menuList" label-width="100px" size="mini" style="background:#fff; padding:20px;">
                    <el-form-item :span="12" label="父元素：">
                        <p v-if="showLabel">{{menuList.pName}}</p>
                        <el-select  v-else v-model="menuList.p_id" filterable placeholder="请选择">
                            <el-option
                            v-for="item in allMenu"
                            :key="item.p_id"
                            :label="item.pName"
                            :value="item.p_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :span="12" label="导航名称：">
                        <p v-if="showLabel">{{menuList.name}}</p>
                        <el-input v-else v-model="menuList.name" placeholder="请输入导航名称"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用：">
                        <el-switch v-if="showLabel" disabled="disabled" v-model="menuList.valid == 1?true:false"></el-switch>
                        <el-switch v-else v-model="menuList.valid"></el-switch>
                    </el-form-item>
                    <el-form-item label="优先级：">
                        <p v-if="showLabel">{{menuList.sort_tree}}</p>
                        <el-input v-else v-model="menuList.sort_tree" placeholder="请输入优先级（格式为：1,2,3）"></el-input>
                    </el-form-item>
                    <el-form-item label="URL：">
                        <p v-if="showLabel">{{menuList.url}}</p>
                        <el-input v-else v-model="menuList.url" placeholder="请输入前端路由(选填)"></el-input>
                    </el-form-item>

                    <el-form-item label="内容简介：">
                        <p v-if="showLabel" v-html="menuList.content"></p>
                        <simditor v-show="!showLabel" id="menuContent" ref="menuContent"
                            @change="changeContent" :value="menuList.content"
                        >
                        </simditor>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-if="showLabel" @click="addMenu">新增</el-button>
                        <el-button type="primary" @click="camcelPrev" v-else>取消</el-button>
                        <el-button @click="editMenu" v-if="showLabel">编辑</el-button>
                        <el-button @click="saveMenu" v-else>保存</el-button>
                        <el-button type="danger" @click="deleteMenu">删除</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import  Simditor    from    '@/components/back/manage/Simditor'
import 	Menu 		from "@/service/menu-service.js"
const 	_menu 	    = new Menu();
import  Mutil 		from  '@/util/mm.js';
const   _mm         = new Mutil();
export default {
    name:'architecture',
    data() {
        return {
            data2: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            menuList:[],
            cacheMenu:[],
            showLabel:true,
            allMenu:[]
        };
    },
    created(){
        this.findAllMenu();
        this.findMenu();
    },
    components: {
        Simditor
    },
    methods:{
        // 这是对父元素的数据进行填充
        findMenu(){
            _menu.findMenu({}).then((res)=>{
                this.allMenu = res.data;
            },(err)=>{
                console.log(err);
            })
        },
        deleteMenu(){
            // 这里在点击的时候先判断这个节点是否有子项
            if('children' in this.menuList){
                this.$message({
                    showClose: true,
                    message: '请先删除该节点下的子节点',
                    type: 'warning'
                });
                return false;
            }
            this.$confirm('您确定删除这个节点, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 这里调用删除接口进行删除数据
                _menu.deleteMenu({'ids': this.menuList.id}).then((res)=>{
                    this.findAllMenu();
                },(err)=>{
                    console.log(err)
                })
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        setContentValue(val){
            this.$refs.menuContent.setValue(val);
        },
        addMenu(){
            
            this.setContentValue("");
            this.menuList= {};
            this.showLabel = !this.showLabel;
        },
        camcelPrev(){
            this.showLabel = !this.showLabel;
            //这里点击取消之后还需要还原之前的数据
            this.findAllMenu();
        },
        editMenu(){
            this.showLabel = !this.showLabel;
            this.setContentValue(this.menuList.content);
        },
        saveMenu(){
            console.log(this.menuList);
            this.menuList.valid = this.menuList.valid?1:0;
            _menu.saveMenu(this.menuList).then((res)=>{
                this.findAllMenu();
                this.showLabel = !this.showLabel;
            },(err)=>{
                console.log(err)
            })
        },
        findAllMenu(){
            const loading = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            _menu.findAllMenu({}).then((res)=>{ 
                this.data2 = _mm.translateDataToTree(res.data);
                this.menuList = this.data2[0];
                console.log(this.menuList)
                loading.close();
            },(err)=>{
                console.log(err)
            })
        },
        handleClick(data, checked, node){
            if(checked == true){
                this.checkedId = data.id;
                this.$refs.treeForm.setCheckedNodes([data]);
            }
        },
        nodeClick(data,checked,node){
            this.cacheMenu = data;
            data.valid = data.valid==1?true:false;
            this.checkedId = data.id
            this.$refs.treeForm.setCheckedNodes([data]);
            this.menuList = this.cacheMenu;
            this.showLabel = true;
        },
        changeContent(val){
            this.menuList.content = val;
        }
    }
}
</script>
<style>

</style>

